import React, { useState,useCallback, useEffect } from "react";
import { Modal, Button, Form, Input,Row,Col } from 'antd';
import moment from 'moment';
import {EditOutlined, } from '@ant-design/icons';


function ChangeItem(props) {  
    const {currentData,changeItem} = props
    const [isModalVisible, setIsModalVisible] = useState(false);
  
    const showModal = () => {
        setIsModalVisible(true);
    };

    const onFinish=(values)=>{
        console.log({...currentData,...values})
        changeItem({...currentData,...values})
    }
     
    const handleCancel = () => {
        setIsModalVisible(false);
    };


    return (
        <>
            <Button type="link" onClick={showModal} > 
            <EditOutlined />修改
            </Button>
            <Modal visible={isModalVisible} onCancel={handleCancel}  footer={null}>
                <Form
                    name="wrap"
                    labelCol={{
                        flex: '110px',
                    }}
                    labelAlign="left"
                    labelWrap
                    wrapperCol={{
                        flex: 1,
                    }}
                    colon={false}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="班级"
                        name="name"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input  defaultValue ={currentData.name} />
                    </Form.Item>
                    <Form.Item
                        label="课程"
                        name="category"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input defaultValue={currentData.category}/>
                    </Form.Item>
                    <Form.Item
                        label="城市"
                        name="city"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input defaultValue={currentData.city}/>
                    </Form.Item>
                    <Form.Item
                        label="开课时间"
                        name="add_time"
                    >
                        <Input defaultValue ={moment(currentData.add_time).format('YYYY-MM-DD')}/>
                    </Form.Item>
                    <Form.Item>
                        <Row style={{textAlign:'center'}}>
                            <Col span={12}> <Button type="primary" htmlType="submit">提交</Button>
                            </Col>
                            <Col span={12}><Button type="primary" onClick={handleCancel } >取消</Button>
                            </Col>
                        </Row>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default ChangeItem